import React, { useEffect, useState } from'react';
// 引入弹幕样式文件
import '../Danmu.scss'; 

// 定义弹幕组件接收的属性类型
interface DanmuProps {
  // messages是一个字符串数组，用于存储弹幕消息
  messages: string[]; 
}

// 定义Danmu组件，这是一个函数式组件，接收DanmuProps类型的属性
const Danmu: React.FC<DanmuProps> = ({ messages }) => {
  // 使用useState钩子来创建一个状态danmus，用于存储当前显示的弹幕消息，初始值为空数组
  const [danmus, setDanmus] = useState<string[]>([]); 

  // useEffect钩子会在组件挂载和更新时执行回调函数
  useEffect(() => {
    // 使用setInterval创建一个定时器，每2000毫秒执行一次回调函数
    const interval = setInterval(() => {
      // 检查传入的messages数组中是否还有消息
      if (messages.length > 0) {
        // 从messages数组中取出第一条消息（shift方法会改变原数组）
        const newDanmu = messages.shift(); 
        // 如果成功取出消息
        if (newDanmu) {
          // 更新danmus状态，将新取出的消息添加到danmus数组中
          setDanmus((prev) => [...prev, newDanmu]); 
        }
      }
    }, 2000);

    // 返回一个清理函数，在组件卸载时执行，用于清除定时器
    return () => clearInterval(interval); 
  }, [messages]); 

  return (
    // 弹幕容器，用于包裹所有的弹幕消息
    <div className="danmu-container">
      {/* 遍历danmus数组，为每个弹幕消息创建一个div元素 */}
      {danmus.map((message, index) => (
        // 每个弹幕消息的div元素，使用index作为唯一标识
        <div key={index} className="danmu-item"> 
          {/* 显示弹幕消息内容 */}
          {message} 
        </div>
      ))}
    </div>
  );
};

// 导出Danmu组件，使其可以在其他文件中被导入使用
export default Danmu; 